<template>
    <ph-td :class="cns" @click.stop="onCheck(id,!checked)" align="center">
        <icon :icon="icon" :hover='true'/>
    </ph-td>
</template>
<script lang="ts">
import { computed, defineComponent, inject } from 'vue'
import Icon from 'ph-icon'
import PhTd from './td.vue'
export default defineComponent({
    components:{Icon,PhTd},
    props:{
        checked:{
            type:Boolean
        },
        id:{
            type:[String,Number]
        },
        checkMode:{
            type:String,
            default:"check"
        }
    },
    setup(props) {
        const onCheck = inject<(id:string|number,checked:boolean)=>void>('toggleTbCheck')
        const icon = computed(()=>{
            if(props.checkMode==='radio')return props.checked?'check-circle':'circle-o'
            else return props.checked?'check-square':'square-o'
        })
        const cns = computed(()=>{
            return {
                'ph-td-check':true,
                'ph-td-checked':props.checked
            }
        })
        return {icon,cns,onCheck}
    },
})
</script>
<style lang="scss" scoped>
.ph-td{
    &-check{
        overflow: visible;
    }
    &-checked{
        color: var(--ph-theme);
    }
}
</style>
